<!--
 * @描述信息: 登录页
 * @Author:  zls
-->
<template>
  <div class="bmap">
    <h1 class="info">最新版BMapGL不好用，很多方法还不完全能实现</h1>
    <h1 class="info">最好还是用BMap 【https://api.map.baidu.com/api?v=3.0&ak=？】版本</h1>
    <div id="container" style="width: 70%; height: 70%; overflow: hidden"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { BMAP_INIT } from '@/utils/BMap/index'
import { GET_LOCATION } from '@/utils/BMap/getLocation'
import { BMAP_ADDMARKER } from '@/utils/BMap/addMarker'
import { BMAP_ADDINFOWINDOW } from '@/utils/BMap/addInfoWindow'

// 地图初始化入参
const BMapObj: any = reactive({
  id: 'container',
  lng: 116.404,
  lat: 39.915,
  zoom: 12
})
// marker标注数据
const markerList: any = reactive({
  list: [
    {
      id: 1,
      lng: 118.752035,
      lat: 32.0672355,
      options: {
        enableDragging: true,
        title: '鼠标移到marker上的显示内容1'
      }
    },
    {
      id: 2,
      lng: 118.732035,
      lat: 32.0872355,
      options: {
        enableDragging: true,
        title: '鼠标移到marker上的显示内容2'
      }
    }
  ]
})
onMounted(() => {
  // BMapInit()
})

// 地图初始化
function BMapInit() {
  BMAP_INIT(BMapObj, (obj: any) => {
    const { BMAP, map } = obj

    // 定位到到期位置并获取当前位置信息
    GET_LOCATION(BMAP, map)

    // 添加marker及其事件（循环添加）
    const markersAll: any = []
    markerList.list.forEach((v: any) => {
      v.options['icon'] = new BMAP.Icon('/src/assets/imgs/map-camera.png', new BMAP.Size(24, 24))
      BMAP_ADDMARKER(BMAP, map, v, (obj: any) => {
        const { type, data, marker } = obj // type：1表示单击显示信息窗口；2表示右击删除；3表示拖拽
        if (marker) {
          markersAll.push(marker)
        }
        console.log('--当前marker各事件信息--', data)
        switch (type) {
          case 1:
            BMAP_ADDINFOWINDOW(BMAP, map, v, (type: number) => {
              console.log('--点击信息窗口中第几个图标--', type)
            })
            break
          case 2:
            deleteMarker(data)
            break
          case 3:
            dragMarker(data)
            break
        }
      })
    })

    // 创建并添加点聚合（更改样式等请看官网）
    const markerClusterer = new window['BMapLib'].MarkerClusterer(map, { markers: markersAll })
    markerClusterer.addMarkers(markersAll)
  })
}

// 删除marker
function deleteMarker(id: number | string) {
  const index = markerList.list.findIndex((v: any) => v.id === id)
  if (index !== -1) markerList.list.splice(index, 1)
  BMapInit()
}

// 拖拽marker
function dragMarker(data: any) {
  console.log(data)
}
</script>

<style lang="scss" scoped>
.bmap {
  height: 100%;
  @include flex();
  flex-direction: column;
  .info {
    font-size: 20px;
    margin-bottom: 30px;
  }
}
</style>
